<template>
  <div class="wrapper">
  </div>
</template>

<script>
import * as THREE from "three";
import { FirstPersonControls } from "./js/controls";
import { Terrain } from "./js/terrain";
import { App } from "./js/index";
export default {
  name: "terrain",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    load() {
      let app = new App();

      // Let there be light
      let light = new THREE.DirectionalLight(0xe0e0e0);
      light.position.set(1, 1, 0).normalize();
      app.scene.add(light);

      let fog = new THREE.FogExp2(0x998877, 0.005);
      app.scene.fog = fog;
      app.renderer.setClearColor(fog.color, 1);

      let controls = new FirstPersonControls(app);

      Terrain.fromImage("static/images/terrain.png")
        .then(function(terrain) {
          app.terrain = terrain;

          var loader = new THREE.TextureLoader();

          var texture = loader.load("static/images/texture2.png");

          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
          texture.repeat.set(terrain.width / 100, terrain.height / 100);

          app.scene.add(terrain.build(texture));

          // Scale terrain peaks
          terrain.mesh.scale.y = 50.0;

          // Start in middle of terrain
          controls.position.x = terrain.width / 2;
          controls.position.z = terrain.height / 2;

          window.addEventListener("app-update", function(evt) {
            controls.update(evt.detail.delta);
          });

          app.start();
        })
        .catch(function(e) {
          throw e;
        });
    }
  },
  created() {},
  mounted() {
    this.load();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
    position: absolute;
    height: 0px;
}
</style>
